<template> 
  <div class="detail-container">
    <div>
      <el-steps :active="formatStepStatus(order.status)" finish-status="success" align-center>
        <el-step title="提交订单" :description="formatTime(order.createTime)"></el-step>
        <el-step title="支付订单" :description="formatTime(order.paymentTime)"></el-step>
        <el-step title="平台发货" :description="formatTime(order.deliveryTime)"></el-step>
        <el-step title="确认收货" :description="formatTime(order.receiveTime)"></el-step>
        <el-step title="完成评价" :description="formatTime(order.commentTime)"></el-step>
      </el-steps>
    </div>
    <el-card shadow="never" style="margin-top: 15px">
      <div class="operate-container">
        <i class="el-icon-warning color-danger" style="margin-left: 20px"></i>
        <span class="color-danger">当前订单状态：{{order.status | formatStatus}}
          {{order.deleteStatus | formatDeleteStatus}}</span>
        <div class="operate-button-container" v-show="order.status===0">
          <el-button size="mini" @click="showUpdateReceiverDialog" v-if="role[0] != 2">修改收货人信息</el-button>
          <el-button size="mini">修改商品信息</el-button>
          <!-- <el-button size="mini" @click="showUpdateMoneyDialog">修改费用信息</el-button> -->
          <!--<el-button size="mini" @click="showMessageDialog">发送站内信</el-button>
          <el-button size="mini" @click="showCloseOrderDialog">关闭订单</el-button>-->
          <el-button size="mini" @click="showGMOrderDialog" v-if="role[0] == 1 || role[0] == 4">管理员备注</el-button>
          <!-- <el-button size="mini" @click="showMarkOrderDialog" v-if="role[0] != 2">备注订单</el-button> -->
        </div>
        <div class="operate-button-container" v-show="order.status===1">
          <el-button size="mini" @click="showUpdateReceiverDialog" v-if="role[0] != 2">修改收货人信息</el-button>
          <!--<el-button size="mini" @click="showMessageDialog">发送站内信</el-button>
          <el-button size="mini">取消订单</el-button>-->
          <el-button size="mini" @click="showGMOrderDialog" v-if="role[0] == 1 || role[0] == 4">管理员备注</el-button>
          <!-- <el-button size="mini" @click="showMarkOrderDialog" v-if="role[0] != 2">备注订单</el-button> -->
        </div>
        <div class="operate-button-container" v-show="order.status===2||order.status===3">
          <!--<el-button size="mini" @click="showLogisticsDialog">订单跟踪</el-button> -->
          <!--<el-button size="mini" @click="showMessageDialog">发送站内信</el-button>-->
          <el-button size="mini" @click="showGMOrderDialog" v-if="role[0] == 1 || role[0] == 4">管理员备注</el-button>
          <!-- <el-button size="mini" @click="showMarkOrderDialog">备注订单</el-button> -->
        </div>
        <div class="operate-button-container" v-show="order.status===4 && order.deleteStatus===0">
          <el-button size="mini" @click="handleDeleteOrder">删除订单</el-button>
          <el-button size="mini" @click="showGMOrderDialog" v-if="role[0] == 1 || role[0] == 4">管理员备注</el-button>
          <!-- <el-button size="mini" @click="showMarkOrderDialog">备注订单</el-button> -->
        </div>
      </div>
      <div style="margin-top: 20px">
        <svg-icon icon-class="marker" style="color: #606266"></svg-icon>
        <span class="font-small">基本信息</span>
      </div>
      <div class="table-layout">
        <el-row>
          <el-col :span="4" class="table-cell-title">订单编号</el-col>
          <el-col :span="4" class="table-cell-title">发货单流水号</el-col>
          <el-col :span="4" class="table-cell-title">用户账号</el-col>
          <el-col :span="4" class="table-cell-title">支付方式</el-col>
          <el-col :span="4" class="table-cell-title">订单来源</el-col>
          <el-col :span="4" class="table-cell-title">订单类型</el-col>
        </el-row>
        <el-row>
          <el-col :span="4" class="table-cell">{{order.orderSn}}</el-col>
          <el-col :span="4" class="table-cell">暂无</el-col>
          <el-col :span="4" class="table-cell">{{order.memberUsername}}</el-col>
          <el-col :span="4" class="table-cell">{{order.payType | formatPayType}}</el-col>
          <el-col :span="4" class="table-cell">{{order.sourceType | formatSourceType}}</el-col>
          <el-col :span="4" class="table-cell">{{order.orderType | formatOrderType}}</el-col>
        </el-row>
        <el-row>
          <el-col :span="4" class="table-cell-title">配送方式</el-col>
          <el-col :span="4" class="table-cell-title">物流单号</el-col>
          <el-col :span="4" class="table-cell-title">自动确认收货时间</el-col>
          <el-col :span="4" class="table-cell-title">订单可得优币</el-col>
          <el-col :span="4" class="table-cell-title">订单可得成长值</el-col>
          <el-col :span="4" class="table-cell-title">活动信息</el-col>
        </el-row>
        <el-row>
          <el-col :span="4" class="table-cell">{{order.deliveryCompany | formatNull}}</el-col>
          <el-col :span="4" class="table-cell">{{order.deliverySn | formatNull}}</el-col>
          <el-col :span="4" class="table-cell">{{order.autoConfirmDay}}天</el-col>
          <el-col :span="4" class="table-cell">{{order.integral}}</el-col>
          <el-col :span="4" class="table-cell">{{order.growth}}</el-col>
          <el-col :span="4" class="table-cell">
            <el-popover placement="top-start" title="活动信息" width="200" trigger="hover" :content="order.promotionInfo">
              <span slot="reference">{{order.promotionInfo | formatLongText}}</span>
            </el-popover>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24" class="table-cell-title">留言</el-col>
        </el-row>
        <el-row>
          <el-col :span="24" class="table-cell">{{order.note | formatNull}}</el-col>
        </el-row>
      </div>
      <div style="margin-top: 20px">
        <svg-icon icon-class="marker" style="color: #606266"></svg-icon>
        <span class="font-small">收货人信息</span>
      </div>
      <div class="table-layout">
        <el-row>
          <el-col :span="4" class="table-cell-title">收货人</el-col>
          <el-col :span="4" class="table-cell-title">手机号码</el-col>
          <el-col :span="12" class="table-cell-title">收货地址</el-col>
          <el-col :span="4" class="table-cell-title">买家地址确认</el-col>
        </el-row>
        <el-row>
          <el-col :span="4" class="table-cell">{{order.receiverName}}</el-col>
          <el-col :span="4" class="table-cell">{{order.receiverPhone}}</el-col>
          <el-col :span="12" class="table-cell">{{order | formatAddress}}</el-col>
          <el-col :span="4" class="table-cell">{{order.receiverConfirm == 0? '未确定': '已确定'}}</el-col>
        </el-row>
      </div>
      <div style="margin-top: 20px">
        <svg-icon icon-class="marker" style="color: #606266"></svg-icon>
        <span class="font-small">商品信息</span>
      </div>
      <el-table ref="orderItemTable" :data="order.orderItemList" style="width: 100%;margin-top: 20px" border>
        <el-table-column label="商品图片" width="120" align="center">
          <template slot-scope="scope">
            <img :src="scope.row.productPic" style="height: 80px">
          </template>
        </el-table-column>
        <el-table-column label="商品名称" align="center">
          <template slot-scope="scope">
            <p>{{scope.row.productName}}</p>
            <p>品牌：{{scope.row.productBrand}}</p>
          </template>
        </el-table-column>
        <el-table-column label="价格/货号" width="120" align="center">
          <template slot-scope="scope">
            <p>价格：￥{{scope.row.productPrice}}</p>
            <p>货号：{{scope.row.productSn}}</p>
          </template>
        </el-table-column>
        <el-table-column label="属性" width="120" align="center">
          <template slot-scope="scope">
            {{scope.row.productAttr | formatProductAttr}}
          </template>
        </el-table-column>
        <el-table-column label="数量" width="120" align="center">
          <template slot-scope="scope">
            {{scope.row.productQuantity}}
          </template>
        </el-table-column>
        <el-table-column label="小计" width="120" align="center">
          <template slot-scope="scope">
            ￥{{scope.row.productPrice*scope.row.productQuantity}}
          </template>
        </el-table-column>
      </el-table>
      <div style="float: right;margin: 20px">
        合计：<span class="color-danger">￥{{order.totalAmount}}</span>
      </div>
      <div style="margin-top: 60px">
        <svg-icon icon-class="marker" style="color: #606266"></svg-icon>
        <span class="font-small">费用信息</span>
      </div>
      <div class="table-layout">
        <el-row>
          <el-col :span="6" class="table-cell-title">商品合计</el-col>
          <el-col :span="6" class="table-cell-title">运费</el-col>
          <el-col :span="6" class="table-cell-title">优惠券</el-col>
          <el-col :span="6" class="table-cell-title">积分抵扣</el-col>
        </el-row>
        <el-row>
          <el-col :span="6" class="table-cell">￥{{order.totalAmount}}</el-col>
          <el-col :span="6" class="table-cell">{{order.status >= 2? 
            order.freightAmount == 0?'包邮':'￥' + order.freightAmount:'未设置'}}</el-col>
          <el-col :span="6" class="table-cell">-￥{{order.couponAmount}}</el-col>
          <el-col :span="6" class="table-cell">-￥{{order.orderIntegralAmount +'(数量:'+order.orderIntegralCount+')'}}</el-col>
        </el-row>
        <el-row>
          <el-col :span="6" class="table-cell-title">活动优惠</el-col>
          <el-col :span="6" class="table-cell-title">折扣金额</el-col>
          <el-col :span="6" class="table-cell-title">实付金额</el-col>
          <el-col :span="6" class="table-cell-title">订单总金额</el-col>
        </el-row>
        <el-row>
          <el-col :span="6" class="table-cell">-￥{{order.promotionAmount}}</el-col>
          <el-col :span="6" class="table-cell">-￥{{order.discountAmount}}</el-col>
          <el-col :span="6" class="table-cell">
            <span class="color-danger">￥{{order.payAmount}}</span>
          </el-col>
          <el-col :span="6" class="table-cell">
            <span class="color-danger">￥{{order.totalAmount+order.freightAmount}}</span>
          </el-col>
        </el-row>
      </div>
      <div style="margin-top: 20px">
        <svg-icon icon-class="marker" style="color: #606266"></svg-icon>
        <span class="font-small">操作信息</span>
      </div>
      <el-table style="margin-top: 20px;width: 100%" ref="orderHistoryTable" :data="order.historyList" border>
        <el-table-column label="操作者" width="120" align="center">
          <template slot-scope="scope">
            {{scope.row.operateMan}}
          </template>
        </el-table-column>
        <el-table-column label="操作时间" width="160" align="center">
          <template slot-scope="scope">
            {{formatTime(scope.row.createTime)}}
          </template>
        </el-table-column>
        <el-table-column label="订单状态" width="120" align="center">
          <template slot-scope="scope">
            {{scope.row.orderStatus | formatStatus}}
          </template>
        </el-table-column>
        <el-table-column label="付款状态" width="120" align="center">
          <template slot-scope="scope">
            {{scope.row.orderStatus | formatPayStatus}}
          </template>
        </el-table-column>
        <el-table-column label="发货状态" width="120" align="center">
          <template slot-scope="scope">
            {{scope.row.orderStatus | formatDeliverStatus}}
          </template>
        </el-table-column>
        <el-table-column label="备注" align="center">
          <template slot-scope="scope">
            {{scope.row.note}}
          </template>
        </el-table-column>
      </el-table>
      <div style="margin-top: 20px">
        <svg-icon icon-class="marker" style="color: #606266"></svg-icon>
        <span class="font-small">管理员</span>
      </div>
      <div>
        <el-table style="margin-top: 20px;width: 100%" ref="orderHistoryTable" :data="order.historyList" border>
          <el-table-column label="管理员备注" align="left">
            <template slot-scope="scope">
                {{order.operRemark}}
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-card>
    <el-dialog title="修改收货人信息" :visible.sync="receiverDialogVisible" width="40%">
      <el-form :model="receiverInfo" ref="receiverInfo_Form" label-width="150px" :rules="receiverFormRules">
        <el-form-item label="收货人姓名：" prop='receiverName'>
          <el-input v-model="receiverInfo.receiverName" style="width: 200px"></el-input>
        </el-form-item>
        <el-form-item label="手机号码：" prop='receiverPhone'>
          <el-input v-model="receiverInfo.receiverPhone" style="width: 200px">
          </el-input>
        </el-form-item>
        <el-form-item label="邮政编码：" prop='receiverPostCode'>
          <el-input v-model="receiverInfo.receiverPostCode" style="width: 200px">
          </el-input>
        </el-form-item>
        <el-form-item label="所在区域：" prop='receiverArea'>
          <el-input v-model="receiverInfo.receiverArea" style="width: 200px;display: none;">
          </el-input>
          <v-distpicker :province="receiverInfo.receiverProvince" :city="receiverInfo.receiverCity"
            :area="receiverInfo.receiverRegion" @selected="onSelectRegion"></v-distpicker>
        </el-form-item>
        <el-form-item label="详细地址：" prop='receiverDetailAddress'>
          <el-input v-model="receiverInfo.receiverDetailAddress" type="textarea" rows="3">
          </el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="receiverDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleUpdateReceiverInfo">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog title="修改费用信息" :visible.sync="moneyDialogVisible" width="40%">
      <div class="table-layout">
        <el-row>
          <el-col :span="6" class="table-cell-title">商品合计</el-col>
          <el-col :span="6" class="table-cell-title">运费</el-col>
          <el-col :span="6" class="table-cell-title">优惠券</el-col>
          <el-col :span="6" class="table-cell-title">积分抵扣</el-col>
        </el-row>
        <el-row>
          <el-col :span="6" class="table-cell">￥{{order.totalAmount}}</el-col>
          <el-col :span="6" class="table-cell">
            <el-input v-model.number="moneyInfo.freightAmount" size="mini"><template slot="prepend">￥</template>
            </el-input>
          </el-col>
          <el-col :span="6" class="table-cell">-￥{{order.couponAmount}}</el-col>
          <el-col :span="6" class="table-cell">-￥{{order.integralAmount}}</el-col>
        </el-row>
        <el-row>
          <el-col :span="6" class="table-cell-title">活动优惠</el-col>
          <el-col :span="6" class="table-cell-title">折扣金额</el-col>
          <el-col :span="6" class="table-cell-title">订单总金额</el-col>
          <el-col :span="6" class="table-cell-title">应付款金额</el-col>
        </el-row>
        <el-row>
          <el-col :span="6" class="table-cell">-￥{{order.promotionAmount}}</el-col>
          <el-col :span="6" class="table-cell">
            <el-input v-model.number="moneyInfo.discountAmount" size="mini"><template slot="prepend">-￥</template>
            </el-input>
          </el-col>
          <el-col :span="6" class="table-cell">
            <span class="color-danger">￥{{order.totalAmount+moneyInfo.freightAmount}}</span>
          </el-col>
          <el-col :span="6" class="table-cell">
            <span class="color-danger">￥{{order.payAmount+moneyInfo.freightAmount-moneyInfo.discountAmount}}</span>
          </el-col>
        </el-row>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="moneyDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleUpdateMoneyInfo">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog title="发送站内信" :visible.sync="messageDialogVisible" width="40%">
      <el-form :model="message" ref="receiverInfoForm" label-width="150px">
        <el-form-item label="标题：">
          <el-input v-model="message.title" style="width: 200px"></el-input>
        </el-form-item>
        <el-form-item label="内容：">
          <el-input v-model="message.content" type="textarea" rows="3">
          </el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="messageDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleSendMessage">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog title="关闭订单" :visible.sync="closeDialogVisible" width="40%">
      <el-form :model="closeInfo" label-width="150px">
        <el-form-item label="操作备注：">
          <el-input v-model="closeInfo.note" type="textarea" rows="3">
          </el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="closeDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleCloseOrder">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog title="备注订单" :visible.sync="markOrderDialogVisible" width="40%">
      <el-form :model="markInfo" label-width="150px">
        <el-form-item label="操作备注：">
          <el-input v-model="markInfo.note" type="textarea" rows="3">
          </el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="markOrderDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleMarkOrder">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog title="管理员备注" :visible.sync="GMOrderDialogVisible" width="40%">
      <el-form :model="GMInfo" label-width="150px">
        <el-form-item label="操作备注：">
          <el-input v-model="GMInfo.remark" type="textarea" rows="3">
          </el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="GMOrderDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleGMOrder">确 定</el-button>
      </span>
    </el-dialog>
    <logistics-dialog v-model="logisticsDialogVisible"></logistics-dialog>
  </div>
</template>
<script>
  import { getOrderDetail, updateReceiverInfo, updateMoneyInfo, closeOrder, updateOrderNote, deleteOrder, updateGMNote } from '@/api/order';
  import LogisticsDialog from '@/views/oms/order/components/logisticsDialog';
  import { formatDate } from '@/utils/date';
  import { formatProductAttr } from '@/utils/index';
  import VDistpicker from 'v-distpicker';
  import { phoneValidata } from '@/utils/validate';
  import { getRole } from '@/utils/auth'

  const defaultReceiverInfo = {
    orderId: null,
    receiverName: null,
    receiverPhone: null,
    receiverPostCode: null,
    receiverDetailAddress: null,
    receiverProvince: null,
    receiverCity: null,
    receiverRegion: null,
    status: null,
    deleteStatus: null
  };
  export default {
    name: 'orderDetail',
    components: { VDistpicker, LogisticsDialog },
    data() {
      return {
        role: '',
        id: null,
        order: {},
        receiverDialogVisible: false,
        GMOrderDialogVisible: false,
        receiverInfo: Object.assign({}, defaultReceiverInfo),
        moneyDialogVisible: false,
        moneyInfo: { orderId: null, freightAmount: 0, discountAmount: 0, status: null },
        messageDialogVisible: false,
        message: { title: null, content: null },
        closeDialogVisible: false,
        closeInfo: { note: null, id: null },
        markOrderDialogVisible: false,
        markInfo: { id: null, note: null },
        GMInfo: { id: null, remark: null },
        logisticsDialogVisible: false,
        receiverFormRules: {
          // roleName: [
          //   {required: true, validator: (rule, value, callback)=>{
          //     ruleName(rule, value, callback,'规则名称')
          //   }, trigger: 'blur' }
          // ],
          receiverPhone: [
            {
              required: true, validator: (rule, value, callback) => {
                phoneValidata(rule, value, callback, '手机号')
              }, trigger: 'blur'
            }
          ],
          receiverName: [
            { required: true, message: '请选择收货人姓名', trigger: 'blur' }
          ],
          receiverPostCode: [
            { required: false, message: '请选择邮编', trigger: 'blur' }
          ],
          receiverArea: [
            {
              required: true, validator: (rule, value, callback) => {
                let { receiverProvince, receiverCity, receiverRegion } = this.receiverInfo;
                if (receiverProvince === '省') {
                  callback(new Error('省不能为空'));
                } else if (receiverCity === '市') {
                  callback(new Error('市不能为空'));
                } else if (receiverRegion === '区') {
                  callback(new Error('区不能为空'));
                } else {
                  callback();
                }
              }, trigger: 'change'
            }
          ],
          receiverDetailAddress: [
            { required: true, message: '请选择详细地址', trigger: 'blur' }
          ]
        }
      }
    },
    created() {
      this.role = JSON.parse(getRole())
      this.id = this.list = this.$route.query.id;
      getOrderDetail(this.id).then(data => {
        this.order = data.info;
      });
    },
    filters: {
      formatNull(value) {
        if (value === undefined || value === null || value === '') {
          return '暂无';
        } else {
          return value;
        }
      },
      formatLongText(value) {
        if (value === undefined || value === null || value === '') {
          return '暂无';
        } else if (value.length > 8) {
          return value.substr(0, 8) + '...';
        } else {
          return value;
        }
      },
      formatDeleteStatus(value) {
        if (value === 1) {
          return '，已删除';
        } else {
          return ''
        }
      },
      formatPayType(value) {
        if (value === 1) {
          return '支付宝';
        } else if (value === 2) {
          return '微信';
        } else {
          return '未支付';
        }
      },
      formatSourceType(value) {
        if (value === 1) {
          return 'APP订单';
        } else {
          return 'PC订单';
        }
      },
      formatOrderType(value) {
        if (value === 1) {
          return '秒杀订单';
        } else {
          return '正常订单';
        }
      },
      formatAddress(order) {
        let str = order.receiverProvince;
        if (order.receiverCity != null) {
          str += "  " + order.receiverCity;
        }
        str += "  " + order.receiverRegion;
        str += "  " + order.receiverDetailAddress;
        return str;
      },
      formatStatus(value) {
        if (value === 1) {
          return '待发货';
        } else if (value === 0) {
          return '待付款';
        }else if (value === 2) {
          return '已发货';
        } else if (value === 3) {
          return '已收货';
        } else if (value === 4) {
          return '已关闭';
        } else if (value === 5) {
          return '已完成';
        } else {
          return '待付款';
        }
      },
      formatProductAttr(value) {
        return formatProductAttr(value);
      },
      formatPayStatus(value) {
        if (value === 0) {
          return '未支付';
        } else if (value === 4) {
          return '已退款';
        } else {
          return '已支付';
        }
      },
      formatDeliverStatus(value) {
        if (value === 0 || value === 1) {
          return '未发货';
        } else {
          return '已发货';
        }
      }
    },
    methods: {
      onSelectRegion(data) {
        this.receiverInfo.receiverProvince = data.province.value;
        this.receiverInfo.receiverCity = data.city.value;
        this.receiverInfo.receiverRegion = data.area.value;
        this.receiverInfo.receiverArea = data.province.value + data.city.value + data.area.value;
      },
      formatTime(time) {
        if (time == null || time === '') {
          return '';
        }
        let date = new Date(time);
        return formatDate(date, 'yyyy-MM-dd hh:mm:ss')
      },
      formatStepStatus(value) {
        if (value === 1) {
          //待发货
          return 2;
        } else if (value === 2) {
          //已发货
          return 3;
        } else if (value === 3) {
          //已完成
          return 4;
        } else {
          //待付款、已关闭、无限订单
          return 1;
        }
      },
      showUpdateReceiverDialog() {
        this.receiverDialogVisible = true;
        this.receiverInfo = {
          orderId: this.order.id,
          receiverName: this.order.receiverName,
          receiverPhone: this.order.receiverPhone,
          receiverPostCode: this.order.receiverPostCode,
          receiverDetailAddress: this.order.receiverDetailAddress,
          receiverProvince: this.order.receiverProvince,
          receiverCity: this.order.receiverCity,
          receiverRegion: this.order.receiverRegion,
          status: this.order.status
        }
      },
      handleUpdateReceiverInfo() {
        this.$refs['receiverInfo_Form'].validate((valid) => {
          if (valid) {
            this.$confirm('是否要修改收货信息?', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(() => {
              updateReceiverInfo(this.receiverInfo).then(data => {
                this.receiverDialogVisible = false;
                this.$message({
                  type: 'success',
                  message: '修改成功!'
                });
                getOrderDetail(this.id).then(data => {
                  this.order = data.info;
                });
              });
            });
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      showUpdateMoneyDialog() {
        this.moneyDialogVisible = true;
        this.moneyInfo.orderId = this.order.id;
        this.moneyInfo.freightAmount = this.order.freightAmount;
        this.moneyInfo.discountAmount = this.order.discountAmount;
        this.moneyInfo.status = this.order.status;
      },
      handleUpdateMoneyInfo() {
        this.$confirm('是否要修改费用信息?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          updateMoneyInfo(this.moneyInfo).then(data => {
            this.moneyDialogVisible = false;
            this.$message({
              type: 'success',
              message: '修改成功!'
            });
            getOrderDetail(this.id).then(data => {
              this.order = data.info;
            });
          });
        });
      },
      showMessageDialog() {
        this.messageDialogVisible = true;
        this.message.title = null;
        this.message.content = null;
      },
      handleSendMessage() {
        this.$confirm('是否要发送站内信?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.messageDialogVisible = false;
          this.$message({
            type: 'success',
            message: '发送成功!'
          });
        });
      },
      showCloseOrderDialog() {
        this.closeDialogVisible = true;
        this.closeInfo.note = this.order.note;
        this.closeInfo.id = this.id;
      },
      handleCloseOrder() {
        this.$confirm('是否要关闭?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          let params = {
            ids: [this.closeInfo.id],
            note: this.closeInfo.note
          }
          closeOrder(params).then(data => {
            this.closeDialogVisible = false;
            this.$message({
              type: 'success',
              message: '订单关闭成功!'
            });
            getOrderDetail(this.id).then(data => {
              this.order = data.info;
            });
          });
        });
      },
      showMarkOrderDialog() {
        this.markOrderDialogVisible = true;
        this.markInfo.id = this.order.id;
        this.markInfo.note = this.order.note;
      },
      showGMOrderDialog() {
        this.GMOrderDialogVisible = true;
        //  this.GMInfo.id=this.order.id;
        this.GMInfo.remark = this.order.operRemark;
      },
      handleGMOrder() {
        this.$confirm('确定要进行备注吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          let params = {
            id: this.order.id,
            remark: this.GMInfo.remark,
            status: this.order.status
          }
          updateGMNote(params).then(data => {
            this.GMOrderDialogVisible = false;
            this.$message({
              type: 'success',
              message: '备注成功!'
            });
            getOrderDetail(this.id).then(data => {
              this.order = data.info;
            });
          });
        });
      },
      handleMarkOrder() {
        this.$confirm('是否要备注订单?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          let params = {
            id: this.markInfo.id,
            note: this.markInfo.note,
            status: this.order.status
          }
          updateOrderNote(params).then(data => {
            this.markOrderDialogVisible = false;
            this.$message({
              type: 'success',
              message: '订单备注成功!'
            });
            getOrderDetail(this.id).then(data => {
              this.order = data.info;
            });
          });
        });
      },
      handleDeleteOrder() {
        this.$confirm('是否要进行该删除操作?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          let params = {
            ids: [this.id]
          }
          deleteOrder(params).then(data => {
            this.$message({
              message: '删除成功！',
              type: 'success',
              duration: 1000
            });
            this.$router.back();
          });
        })
      },
      showLogisticsDialog() {
        this.logisticsDialogVisible = true;
      }
    }
  }
</script>
<style scoped>
  .detail-container {
    width: 80%;
    padding: 20px 20px 20px 20px;
    margin: 20px auto;
  }

  .operate-container {
    background: #F2F6FC;
    height: 80px;
    margin: -20px -20px 0;
    line-height: 80px;
  }

  .operate-button-container {
    float: right;
    margin-right: 20px
  }

  .table-layout {
    margin-top: 20px;
    border-left: 1px solid #DCDFE6;
    border-top: 1px solid #DCDFE6;
  }

  .table-cell {
    height: 60px;
    line-height: 40px;
    border-right: 1px solid #DCDFE6;
    border-bottom: 1px solid #DCDFE6;
    padding: 10px;
    font-size: 14px;
    color: #606266;
    text-align: left;
    overflow: hidden;
  }

  .table-cell-title {
    border-right: 1px solid #DCDFE6;
    border-bottom: 1px solid #DCDFE6;
    padding: 10px;
    background: #F2F6FC;
    text-align: left;
    font-size: 14px;
    color: #303133;
  }
</style>